<template>
  <div class="table-list">
    <div class="list-tit" v-if="isShowTitle">
      <img :src="routerName" />
      <label>{{ $route.meta.title }}</label>
    </div>
    <div
      class=""
      style="
        display: flex;
        justify-content: space-between;
        padding-bottom: 14px;
        align-items: center;
      "
      :style="{
        'padding-bottom': isShow ? '0px' : '14px'
      }"
    >
      <!--父组件自定义按钮区域、插槽插入-->
      <div class="custom-btn">
        <slot name="CustomBtn"></slot>
      </div>
      <!-- 模糊查询区域 -->
      <div>
        <el-form
          :inline="true"
          style="display: flex; align-items: center"
          class="query-form"
        >
          <template
            v-if="
              queryBtnCfg &&
              queryBtnCfg.fuzzyQuery &&
              queryBtnCfg.fuzzyQuery.isShow
            "
          >
            <el-form-item :label="queryBtnCfg.fuzzyQuery.filter.label || ''">
              <!-- <el-input
                style="width: 357px; height: 34px"
                :placeholder="queryBtnCfg.fuzzyQuery.filter.placeholder || ''"
                v-model="queryBtnCfg.fuzzyQuery.filter.keyWord"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input> -->
              <el-date-picker
                v-if="queryBtnCfg.fuzzyQuery.filter.type === 'date-picker'"
                v-model="keyWord"
                style="width: 357px; height: 34px"
                :type="queryBtnCfg.fuzzyQuery.filter.pickerType || 'date'"
                :value-format="'yyyy-MM-dd'"
                range-separator="~"
                placeholder="选择日期"
                start-placeholder="选择起始日期"
                end-placeholder="选择终止日期"
              ></el-date-picker>
              <filter-input
                style="width: 357px; height: 34px"
                v-else-if="queryBtnCfg.fuzzyQuery.filter.type === 'select'"
                :config="queryBtnCfg.fuzzyQuery"
                v-model="keyWord"
                @change="setFilter"
              ></filter-input>
              <el-input
                v-else
                style="width: 357px; height: 34px"
                :style="{
                  width: queryBtnCfg.fuzzyQuery.filter.width
                    ? queryBtnCfg.fuzzyQuery.filter.width + 'px'
                    : '357px'
                }"
                :placeholder="queryBtnCfg.fuzzyQuery.filter.placeholder || ''"
                v-model="keyWord"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
            <el-form-item
              :class="{
                'next-advance-hide': !(
                  queryBtnCfg &&
                  queryBtnCfg.advancedQuery &&
                  queryBtnCfg.advancedQuery.isShow
                )
              }"
            >
              <base-btn
                :btnData="btnData"
                @click.native="querySearch(1)"
              ></base-btn>
            </el-form-item>
          </template>
          <template
            v-if="
              queryBtnCfg &&
              queryBtnCfg.advancedQuery &&
              queryBtnCfg.advancedQuery.isShow
            "
          >
            <el-form-item>
              <!-- 高级查询 -->
              <base-btn
                style="margin-right: 0; padding: 5px 0; min-width: unset"
                :btnData="btnData1"
                @click.native="isShow = !isShow"
                v-if="showFilter"
                :changeData="isShow"
              ></base-btn>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
    <!--筛选区域，columnCfg中没有筛选配置则不显示-->
    <transition name="top">
      <div v-if="showFilter && isShow">
        <div class="filter-box">
          <div class="condition-box" ref="filterBox">
            <template v-for="(column, prop) in columnCfg">
              <div
                class="condition"
                v-if="column.hasOwnProperty('filter')"
                :key="prop"
              >
                <!-- alias可选值，需传入字段名，这样满足表格的列位置与顶部数据筛选展示顺序不一致时，
                  分开设置。具体方法：设置两个不同字段，第一个字段不设置filter。第二个字段使用hidden,
                  设置filter, filter中的alias传入第一个字段名 -->
                <template v-if="column.filter.alias">
                  <template v-if="column.filter.type === ':slot'">
                    <label v-show="!column.filter.hideLabel">
                      {{ column.filter.label || column.label }}
                    </label>
                    <div style="flex: 1">
                      <slot :name="column.filter.slot"></slot>
                    </div>
                  </template>
                  <template v-else>
                    <label v-show="!column.filter.hideLabel">
                      {{ column.filter.label || column.label }}
                    </label>
                    <filter-input
                      :config="column"
                      v-model="column.filter.value"
                      :prop="prop"
                      @change="$event => setFilter($event, column.filter.alias)"
                    ></filter-input>
                  </template>
                </template>
                <template v-else>
                  <template v-if="column.filter.type === ':slot'">
                    <label v-show="!column.filter.hideLabel">
                      {{ column.filter.label || column.label }}
                    </label>
                    <div style="flex: 1">
                      <slot :name="column.filter.slot"></slot>
                    </div>
                  </template>
                  <template v-else>
                    <label v-show="!column.filter.hideLabel">
                      {{ column.filter.label || column.label }}
                    </label>
                    <filter-input
                      :config="column"
                      v-model="column.filter.value"
                      :prop="prop"
                      @change="setFilter"
                    ></filter-input>
                  </template>
                </template>
              </div>
            </template>
            <!-- <div class="condition" v-if="!isFilterFold">
          <el-button type="primary" @click="refreshData(1)" :disabled="loading">查询</el-button>
          <el-button @click="resetFilter" :disabled="loading">重置</el-button>
          <el-button v-if="showFilterMore" icon="el-icon-arrow-up" type="primary" class="more-btn" @click="toggleMore" />
        </div> -->
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0px 0px 10px 0px;
          "
        >
          <!-- <el-button @click="resetFilter">清空条件</el-button> -->
          <base-btn
            :btnData="btnData2"
            @click.native="resetFilter"
            v-if="showFilter"
          ></base-btn>
          <!-- <el-button type="primary" @click="refreshData(1)">查询</el-button> -->
          <base-btn
            style="margin-right: 10px"
            :btnData="btnData3"
            @click.native="refreshData(1)"
            v-if="showFilter"
          ></base-btn>
          <!-- <el-button v-if="showFilterMore" icon="el-icon-arrow-down" type="primary" class="more-btn" @click="toggleMore" /> -->
        </div>
      </div>
    </transition>
    <slot name="middle"></slot>
    <!--数据表格-->
    <div class="table" v-if="notable">
      <el-table
        ref="dataTable"
        :data="data"
        v-loading="loading"
        :row-key="rowKey"
        :highlight-current-row="selectType === 'single'"
        stripe
        border
        style="width: 100%"
        :header-cell-class-name="headerCellClassName"
        :size="size"
        v-bind="$attrs"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        :show-overflow-tooltip="true"
      >
        <!-- :height="isShow ? 510 : 650" -->
        <el-table-column
          v-if="selectType === 'multiple'"
          :selectable="selectable"
          type="selection"
          align="center"
          :reserve-selection="true"
          width="60"
        ></el-table-column>
        <template v-for="(column, prop) in columnCfg">
          <el-table-column
            v-if="!column.hidden && isExistColumn(column)"
            :key="prop"
            :prop="prop"
            :width="column.width * (disableWidthRate ? 1 : widthRate)"
            :min-width="column.minWidth"
            :align="column.align"
            :sortable="column.sortable"
            :sort-by="prop"
            :show-overflow-tooltip="column.overflowTip"
            :class-name="column.class"
            :label="column.label"
            :type="column.type"
            :fixed="prop === ':action' ? 'right' : false"
          >
            <template slot-scope="scope">
              <div :style="column.style">
                <!--自定义html内容-->
                <template v-if="prop === ':slot' || column.slotName">
                  <slot
                    :name="column.slotName"
                    :row="scope.row"
                    :index="scope.$index"
                  ></slot>
                </template>
                <!--操作列，key为:action-->
                <div v-else-if="prop === ':action'" class="row-action">
                  <template v-for="btn in column.actionArr">
                    <el-link
                      :style="{
                        margin: '0 4px',
                        color:
                          btn.btnType === 'del' || btn.label === '删除'
                            ? '#F56C6C'
                            : '#0D48CE'
                      }"
                      :icon="btn.icon"
                      :title="btn.title"
                      :underline="false"
                      :disabled="btn.disabled ? btn.disabled(scope.row) : false"
                      v-if="btnCondition(btn, scope.row)"
                      :type="
                        btn.btnType || btn.label === '删除' ? 'del' : 'default'
                      "
                      @click.stop="$emit(btn.event, scope.row)"
                    >
                      {{ btn.label }}
                    </el-link>
                  </template>
                  <div
                    style="margin: 0 4px"
                    v-if="column.more && getMore(column.more, scope.row).length"
                  >
                    <el-dropdown>
                      <el-link :underline="false" style="color: #0d48ce">
                        更多
                        <i class="el-icon-arrow-down el-icon--right"></i>
                      </el-link>
                      <el-dropdown-menu slot="dropdown">
                        <template
                          v-for="btn in getMore(column.more, scope.row)"
                        >
                          <el-dropdown-item>
                            <el-link
                              :style="{
                                margin: '0 4px',
                                color:
                                  btn.btnType === 'del' || btn.label === '删除'
                                    ? '#F56C6C'
                                    : '#0D48CE'
                              }"
                              :icon="btn.icon"
                              :title="btn.title"
                              :underline="false"
                              :disabled="
                                btn.disabled ? btn.disabled(scope.row) : false
                              "
                              v-if="btnCondition(btn, scope.row)"
                              :type="
                                btn.btnType || btn.label === '删除'
                                  ? 'del'
                                  : 'default'
                              "
                              @click.stop="$emit(btn.event, scope.row)"
                            >
                              {{ btn.label }}
                            </el-link>
                          </el-dropdown-item>
                        </template>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
                <template v-else-if="scope.row.$$edit && !column.notEditable">
                  <el-select
                    v-model="scope.row[prop]"
                    v-if="column.options"
                    :placeholder="column.placeholder || '请选择'"
                  >
                    <el-option
                      v-for="(op, index) in column.options"
                      :key="index"
                      :label="op.label"
                      :value="op.value"
                    />
                  </el-select>
                  <el-input-number
                    v-else-if="column.type == 'number'"
                    v-model="scope.row[prop]"
                    :min="0"
                  ></el-input-number>
                  <el-input v-else v-model="scope.row[prop]"></el-input>
                </template>
                <!--列内容可点击-->
                <el-link
                  v-else-if="column.link"
                  :type="column.link.type"
                  @click.stop="$emit(column.link.event, scope.row)"
                  :underline="column.underline === true"
                >
                  <cell-text
                    :value="scope.row[prop]"
                    :dict-key="column.dictKey"
                  ></cell-text>
                </el-link>
                <tag-status
                  v-else-if="column.type == 'status'"
                  :statusType="scope.row[prop]"
                  :statusText="
                    scope.row[prop] === 1
                      ? (column.text || [])[0] || '启用'
                      : (column.text || [])[1] || '禁用'
                  "
                ></tag-status>
                <template v-else-if="column.switch">
                  <el-switch
                    v-model="scope.row[prop]"
                    @change="e => column.switch.change(e, scope.row)"
                    active-color="#0D48CE"
                    inactive-color="#DCDFE6"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </template>
                <template v-else-if="column.type == 'colorTag'">
                  <color-tag
                    v-model="scope.row[prop]"
                    :types="column.map"
                  ></color-tag>
                </template>
                <!--默认-->
                <template v-else>
                  <status-tag :type="column.tag" :value="scope.row[prop]">
                    <template v-if="column.formatter">
                      {{ column.formatter(scope.row[prop], scope.row) }}
                    </template>
                    <cell-text
                      v-else
                      :value="scope.row[prop]"
                      :dict-key="column.dictKey"
                      :class="{ 'single-line': singleLine }"
                    ></cell-text>
                  </status-tag>
                </template>
              </div>
            </template>
          </el-table-column>
        </template>

        <template slot="empty">
          <el-empty
            :image="require('@/assets/emptyBackGround.png')"
            description="暂无数据"
            :image-size="200"
          ></el-empty>
        </template>
      </el-table>
    </div>
    <!--页码显示-->
    <el-pagination
      class="pagination"
      v-if="showPagination"
      :current-page="pagination.pageNum"
      :page-size="pagination.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
/**
 * 数据表格组件，封装筛选框，表格，及页码组件
 * 筛选区域，及表格列支持slot自定义，用以支持不同显示需求
 * 筛选及表格间区域支持slot自定义内容
 * 表格列支持自动以slot，支持内容添加click响应，支行持操作动作，支持按条件显示操作动作
 * 操作显示条件使用正则进行匹配
 * columnCfg使用对象形式，方便初始配置
 * 使用说明查看manual.md
 */
import FilterInput from './FilterInput';
import CellText from './CellText';
import { isExistColumn } from '@/utils/table-column';
import BaseBtn from '@/components/BaseBtn/index';
import tagStatus from '@/components/tagStatus/index';
let filterLineHeight = 40; //筛选区域单行高度，修改输入框高度后需要调整此参数
import colorTag from '@/components/colorTag/index';

export default {
  name: 'index',
  components: {
    CellText,
    FilterInput,
    BaseBtn,
    tagStatus,
    colorTag
  },
  props: {
    //表格数据
    data: {
      type: Array,
      required: true
    },
    queryBtnCfg: {
      type: Object,
      required: true
    },
    //列数据
    columnCfg: {
      type: Object,
      required: true
    },
    //数据加载中
    loading: {
      type: Boolean,
      default: false
    },
    //多选or单选 multiple/single
    selectType: {
      type: String,
      default: ''
    },
    //多选框禁用选项
    selectable: Function,
    //尺寸
    size: {
      type: String,
      default: 'normal'
    },
    //禁用宽度随窗口变化
    disableWidthRate: {
      type: Boolean,
      default: false
    },
    //当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    //每页数量
    pageSize: {
      type: [Number, String],
      default: 10
    },
    //数据总数
    totalSize: {
      type: Number,
      default: 0
    },
    //超长数据单行显示
    singleLine: {
      type: Boolean,
      default: false
    },
    //显示翻页功能区
    showPagination: {
      type: Boolean,
      default: true
    },
    //筛选区域超长是否自动收起
    filterFold: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    },
    headerCellClassName: {
      type: String,
      default: 'headerCellClassName'
    },
    //自定义排序字段
    handleSortfield: Function,
    isShowTitle: {
      type: Boolean,
      default: false
    },
    //搜索字段
    querySearchField: {
      type: String,
      default: 'querySearch'
    },
    // 行 key
    rowKey: {
      type: String,
      default: ''
    },
    notable: {
      type: Boolean,
      default: true
    },
    filterParams: {
      type: Object
    }
  },
  data() {
    return {
      isExistColumn: isExistColumn,
      retParams: {}, //筛选及翻页请求参数
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      multipleSelection: [], //多选内容
      isFilterFold: false, // 是否折叠筛选区域
      showFilterMore: false, //筛选区域是否大于一行，控制展开收起按钮显示
      widthRate: 1,
      isShow: false,
      keyWord: '',
      btnData: {
        name: '查询',
        type: 'search'
      },
      btnData1: {
        name: '高级查询',
        type: 'filter'
      },
      btnData2: {
        name: '清除数据',
        type: 'clear',
        bgColor: '#000'
      },
      btnData3: {
        name: '确定',
        type: 'ok'
      },
      routerName: require('@/assets/widget/routerName.png')
    };
  },
  created() {
    if (this.pageSize) {
      this.pagination.pageSize = this.pageSize;
    }
    if (this.currentPage) {
      this.pagination.pageNum = this.currentPage;
    }
  },
  watch: {
    currentPage: {
      handler(nv) {
        this.pagination.pageNum = nv;
      },
      immediate: true
    }
  },
  mounted() {
    if (
      this.showFilter &&
      this.filterFold &&
      this.$refs.filterBox &&
      this.$refs.filterBox.clientHeight > filterLineHeight
    ) {
      this.showFilterMore = true;
      this.isFilterFold = true; //多行时，默认为收起状态
      this.$refs.filterBox.style.height = filterLineHeight + 'px';
    }
    this.$_resizeHandler();
  },

  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$_resizeHandler);
  },
  computed: {
    //遍历columnCfg对象，查看是否存在filter配置，控制筛选区域显示
    showFilter() {
      for (let prop in this.columnCfg) {
        if (this.columnCfg[prop].hasOwnProperty('filter')) {
          return true;
        }
      }
      return false;
    }
  },
  watch: {
    currentPage(to) {
      this.pagination.pageNum = Number(to);
    },
    pageSize(to) {
      this.pagination.pageSize = Number(to);
    }
  },
  methods: {
    changeShowState() {},
    $_resizeHandler() {
      let width = this.$refs.dataTable.$el.clientWidth;
      this.widthRate =
        width > 1000 ? this.$refs.dataTable.$el.clientWidth / 1000 : 1;
    },
    //展开折叠筛选区域
    toggleMore() {
      this.isFilterFold = !this.isFilterFold;
      this.isFilterFold
        ? (this.$refs.filterBox.style.height = filterLineHeight + 'px')
        : (this.$refs.filterBox.style.height = '');
    },
    getMore(arr, rowData) {
      return arr.filter(item => this.btnCondition(item, rowData));
    },
    //操作按钮条件显示处理
    btnCondition(btn, rowData) {
      if (btn.hasOwnProperty('id')) {
        // return (
        //   this.$store.state.permission.btnAuth.indexOf(
        //     this.$route.path + '{' + btn.id + '}'
        //   ) > -1
        // );
        if (
          !(
            this.$store.state.permission.btnAuth.indexOf(
              this.$route.path + '{' + btn.id + '}'
            ) > -1
          )
        ) {
          return false;
        }
      }
      if (btn.hasOwnProperty('condition')) {
        if (btn.condition.custom) {
          return btn.condition.custom(rowData);
        }
        let check = false;
        for (let key in btn.condition) {
          if (!new RegExp(btn.condition[key]).test(rowData[key])) {
            return false; //有一个条件不满足则直接返回false
          } else {
            check = true;
          }
        }
        return check;
      } else {
        return true;
      }
    },
    btnAuthCheck(btn) {
      if (btn.hasOwnProperty('btnAuth')) {
        return (
          this.$store.state.permission.btnAuth.indexOf(
            this.$route.path + '{' + btn.btnAuth + '}'
          ) > -1
        );
      } else {
        return true;
      }
    },
    //设置当前页码
    setCurrentPage(pageNum) {
      this.pagination.pageNum = pageNum;
    },
    //设置当前选中行
    setCurrentRow(row) {
      this.$refs.dataTable.setCurrentRow(row);
    },
    //设置多选选中行
    setSelectRows(rows) {
      rows.forEach(row => {
        this.$refs.dataTable.toggleRowSelection(row, true);
      });
    },
    //单行点击
    handleRowClick(row) {
      if (this.selectType === 'multiple') {
        this.$refs.dataTable.toggleRowSelection(row);
      }
      this.$emit('row-click', row);
    },
    //多选状态改变
    handleSelectionChange(valArr) {
      this.multipleSelection = valArr;
      this.$emit('selection-change', valArr);
    },
    //页码每页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.refreshData(1);
    },
    //当前页码改变
    handleCurrentChange(val) {
      this.refreshData(val);
    },
    //通过后台api排序，驼峰转下划线后按照sql格式拼接
    handleSortChange(sortConfig) {
      if (sortConfig.column.sortable === 'custom') {
        let params = {};
        if (sortConfig.prop && sortConfig.order) {
          if (this.columnCfg[sortConfig.prop].sortMap) {
            params = {
              orderByClause:
                this.columnCfg[sortConfig.prop].sortMap[sortConfig.order]
            };
          } else {
            params = {
              orderByClause:
                sortConfig.prop.replace(/([A-Z])/g, '_$1').toLowerCase() +
                '_' +
                sortConfig.order.replace('ending', '')
            };
          }
        } else {
          // if (this.columnCfg[sortConfig.prop].sortMap) {
          //   params = {};
          // } else {
          //   params = { orderByClause: '' };
          // }
          params = {
            orderByClause: ''
          };
        }
        Object.assign(this.retParams, params);
        this.refreshData(1);
      }
      //适应新的后端对接字段 2023 9
      // if(sortConfig.column.sortable === )
      this.$emit('Sort-change', sortConfig);
    },
    //修改筛选条件，修改后需要重置页码
    setFilter({ key, val }, alias) {
      if (alias) {
        this.retParams[alias] = val;
      } else {
        this.retParams[key] = val;
      }
    },
    //重置筛选框显示内容
    resetFilterValue() {
      for (let key in this.columnCfg) {
        if (this.columnCfg[key].hasOwnProperty('filter')) {
          this.$set(this.columnCfg[key].filter, 'value', '');
        }
      }
    },
    clearSort() {
      this.$refs.dataTable.clearSort();
    },
    //重置按钮
    resetFilter() {
      this.clearSort();
      this.resetFilterValue();
      this.keyWord = '';
      this.retParams = {};
      this.refreshData(1, true);
    },
    //模糊查询
    querySearch() {
      this.retParams = {
        ...this.retParams,
        [this.querySearchField]: this.keyWord
      };
      this.refreshData(1);
    },
    /**
     * 更新列表数据，提交更新事件
     * @param pageNum 页码，更新筛选条件时需要重置页码为1
     * @param resetFilter
     */
    refreshData(pageNum = 1, resetFilter) {
      // 将模糊搜索条件合并
      if (this.filterParams?.withRoles) {
        this.retParams = {
          ...this.retParams,
          [this.querySearchField]: this.keyWord,
          withRoles: true
        };
      } else {
        this.retParams = {
          ...this.retParams,
          [this.querySearchField]: this.keyWord
        };
      }
      // this.retParams = {
      //   ...this.retParams,
      //   [this.querySearchField]: this.keyWord
      // };
      this.pagination.pageNum = pageNum;
      Object.assign(this.retParams, this.pagination);
      console.log(this.retParams, 'this.retParams');
      this.$emit('refresh-list', this.retParams, resetFilter);
    },
    // 模糊查询
    fuzzyQuery() {},
    getTable() {
      return this.$refs.dataTable;
    }
  }
};
</script>

<style scoped lang="scss">
.table-list {
  .list-tit {
    display: flex;
    align-items: center;
    padding-bottom: 14px;

    label {
      padding-left: 10px;
      font-size: 16px;
    }
  }

  .filter-box {
    margin-bottom: 10px;
    display: flex;

    .btn {
      min-width: 72px;
    }

    .condition-box {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      padding-top: 5px;

      .condition {
        // margin-right: 16px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        // width: 300px;
        width: 25%;
        padding-right: 16px;

        &:last-child {
          margin-right: 0;
        }

        label {
          display: inline-block;
          font-weight: normal;
          text-align: right;
          margin-right: 8px;
          flex-wrap: nowrap;
        }
      }
    }

    .condition-more {
      padding-top: 8px;
      padding-left: 8px;

      .condition {
        margin-right: 0;
      }
    }

    .more-btn {
      padding-left: 8px;
      padding-right: 8px;
      //width: 60px;
      min-width: 40px;
    }
  }

  .insert {
    //margin-bottom: 20px;
  }

  .table {
    //margin-top: 20px;

    .row-action {
      display: flex;
      flex-wrap: wrap;

      .action-link {
        margin: 0 5px;
      }
    }

    .single-line {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 24px;
      line-height: 24px;
    }
  }

  .pagination {
    margin: 20px 0;
    padding-top: 6px;
    text-align: right;
  }
}

::v-deep .headerCellClassName:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

::v-deep .headerCellClassName {
  background-color: #f5f7fa !important;
}

::v-deep .headerCellClassName:nth-last-child(2) {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

::v-deep .el-table__row--striped td {
  background: #f5f7fa !important;
}

::v-deep .el-table__body td {
  border-left: 1px solid #ebeef5;
}

::v-deep .headerCellClassName:first-child {
  border-radius: 0px;
}

::v-deep .headerCellClassName:nth-last-child(2) {
  border-radius: 0px;
}

::v-deep thead th {
  border-left: 1px solid #ebeef5;
}

::v-deep thead th {
  border-top: 1px solid #ebeef5;
}

::v-deep thead th:last-child {
  border-right: 1px solid #ebeef5 !important;
}

::v-deep .el-table__body td:last-child {
  border-right: 1px solid #ebeef5;
}

::v-deep .query-form .el-form-item {
  margin-bottom: 0px;
}

.el-theme1 .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: auto;
}

.table {
  transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;
}

// .top-enter,
// .top-leave-to {
//   transform: translate3d(0, -100%, 0);
// }
// .top-leave,
// .top-enter-to {
//   transform: translate3d(0, 0, 0);
// }
// .top-enter-active,
// .top-leave-active {
//   transition: all 0.5s;
// }

.custom-btn {
  display: flex;
  align-items: center;
  flex: 1;
}
::v-deep .el-link.el-link--default.is-disabled {
  color: #c0c4cc !important;
}
</style>
<style lang="scss">
// 统一设置表格过宽时的横向滚动条样式
.el-table--scrollable-x .el-table__body-wrapper {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}

.next-advance-hide {
  margin-right: 0 !important;
  width: 97px !important;
  overflow: hidden;
}
</style>
